import { Button, Form, Input, Space, DatePicker, Select } from 'antd'
import React from 'react'
import { SearchOutlined } from '@ant-design/icons'
import { apiGetGoodsClassifyList } from '@/request/mallManagement'
import TheButton from "@/components/TheButton";
// import { apiGetCalssify } from '@/request/commodity'
import _ from 'lodash'
import { getDateTime3 } from '@/utils/getDate'

const { RangePicker } = DatePicker

class SearchHeader extends React.Component {
  state = {
    options: [],
    level: '2',
  }
  async componentDidMount() {
    await this.getClassify()
  }
  getClassify = async () => {
    const { level } = this.state
    let res = await apiGetGoodsClassifyList({
      level
    })
    if (res.code === 0 && res.data) {
      let options = res.data.map((v) => {
        return {
          value: v.goodsClassifyId,
          label: v.goodsClassifyName,
        }
      })
      this.setState({ options })
    }
    console.log(res.data)
  }
  onFinish = (values) => {
    if (values.time && values.time.length) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    delete values.time
    _.forIn(values, (v, k) => {
      if (!v) {
        delete values[k]
      }
    })
    this.props.getValue(values)
  }
  reset = () => {
    this.formRef.setFieldsValue({
      goodsName: '',
      goodsId: '',
      goodsStatus: null,
      classifyId: null,
      time: [],
    })
    this.props.getValue({})
  }
  exportTable=()=>{
    let values =  this.formRef.getFieldsValue()
    if (values.time && values.time.length) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    delete values.time
    _.forIn(values, (v, k) => {
      if (!v) {
        delete values[k]
      }
    })
 
    console.log(values,'123');
    this.props.toExport(values)
  }
  render() {
    return (
      <div className="search-header search-header-list">
        <Form
          layout={'inline'}
          ref={(ref) => (this.formRef = ref)}
          onFinish={this.onFinish}>
          <Form.Item name={'goodsName'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'商品名称'}
            />
          </Form.Item>
          <Form.Item name={'goodsId'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'商品ID'}
            />
          </Form.Item>
          <Form.Item name={'goodsStatus'} label="上架状态">
            <Select
              style={{ width: 140 }}
              options={[
                { value: 'Y', label: '上架' },
                { value: 'N', label: '下架' },
                { value: 'G', label: '管理员下架' },
              ]}
              placeholder={'上架状态'}
            />
          </Form.Item>
          <Form.Item name={'classifyId'} label="所属类目">
            <Select
              style={{ width: 140 }}
              options={this.state.options}
              placeholder={'所属类目'}
            />
          </Form.Item>
          <Form.Item name={'time'}>
            <RangePicker />
          </Form.Item>
          <Form.Item>
            <Space size="small" style={{ marginLeft: 10 }}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={this.reset}>重置</Button>
              <TheButton size="middle" type="default" haspermi={['mall:list:exportGoodsBySku']} onClick={this.exportTable} loading={this.props.loading}>导出商品</TheButton>
            </Space>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default SearchHeader
